<!DOCTYPE html>
<html>
<head>
    <!-- https://blog.csdn.net/weixin_39934453/article/details/135131897 -->
    <!-- https://mozilla.github.io/pdf.js/ -->
    <title>PDF预览，禁止复制和下载 PDF.js Example</title>
    <style>
        body{
          background-color: #525659;
        }
        /*A4纸的尺寸是210mm297mm*/
        #pdf-container {
            /* width: 210mm;
            height: auto;
            display: block;
            background-color: #525659;
            margin: 0 auto; */
            padding: 0 0 5px 0;
        }
        .pdf-page{
          display: block;
          position: relative;
          width: 210mm;
          height: 297mm;
          margin: 10px auto;
          padding: 0;
          border: none;
          outline: none;
          background-color: #fff;
        }

        .pdf-page canvas{
            /* border: 1px solid #ccc;
            margin: 10px auto; */
            /* display: block;
            margin: 0 auto;
            padding: 5px 0; */
            display: block;
            padding: 0;
            margin: 0;
        }
/* CSS代码 */
.loading {
  border: 16px solid #f3f3f3; /* 边框宽度和颜色 */
  border-top: 16px solid #3498db; /* 顶部边框颜色，用于显示旋转的颜色 */
  border-radius: 50%; /* 圆角让边框成为圆形 */
  width: 120px; /* 宽度和高度设置为一样的值，以保持正圆 */
  height: 120px;
  animation: spin 2s linear infinite; /* 动画名称、持续时间、速度曲线、循环次数 */


  position: absolute;
  /* top: calc(50% - 子元素高度的一半); */
  top: calc(50% - 60px);
  left: calc(50% - 60px);

}

@keyframes spin {
  0% { transform: rotate(0deg); } /* 动画开始时的角度 */
  100% { transform: rotate(360deg); } /* 动画结束时的角度 */
}






.box1{
		width: 400px;
		height: 400px;
		background-color: #bfa;
		margin:100px auto;
		line-height: 500px; 
		text-align: center;
		font-size: 0;
	}
	.box2{
		width: 100px; 
		height: 100px;
		background: cyan;
		display: inline-block;

	}


    </style>
</head>
<body>

  <div class="box1"> <div class="box2"></div></div>

<div id="pdf-container">
  <div id="1" class="pdf-page"><div id="loading1" class="loading"></div></div>
  <div id="2" class="pdf-page"><div id="loading2" class="loading"></div></div>
  <div id="3" class="pdf-page"><div id="loading3" class="loading"></div></div>
</div>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.js"></script> -->
<script src="js/pdf.js/2.11.338/pdf.min.js"></script>

<script>
  // 移除所有子元素
  function removeChildren(parentElement ){
    let children= parentElement.children
    let childrenLength = children.length;
    for(let index=childrenLength-1; index > -1; index--){
      //console.log('children[index]',index,children[index])
      children[index]?.remove();
    }
  }

  // 元素是否在视窗中
  function isElementInViewport(element) {
    let rect = element.getBoundingClientRect();
    let winHeight= window.innerHeight || document.documentElement.clientHeight;
    if(rect.y<0){
      return rect.bottom > 0;
    }
    return rect.y - winHeight < 0;
  }

  function addPageLoading(pageElement){
    let pageId = pageElement.getAttribute("id");
    var div = document.createElement('div');
    div.setAttribute('id','loading'+pageId);
    div.setAttribute('class','loading');
    pageElement.appendChild(div);
    return div;
  }

  function addPage(pageId,numPages,width,height){
    var container = document.getElementById('pdf-container');
    var div = document.createElement('div');
    div.setAttribute('id',pageId);
    div.setAttribute('class','pdf-page');
    div.setAttribute('pages', numPages);
    div.setAttribute('pdf', 0);

    div.setAttribute('title',`第 ${pageId} 页，共 ${numPages} 页`);
    
    if(width >=0 ){
      div.style.width = width;
    }
    if(height >=0 ){
      div.style.height = height;
    }

    addPageLoading(div)
    container.appendChild(div);
    return div;
  }



setInterval(function() {
    console.log("isElementInViewport3: ",isElementInViewport(document.getElementById('3')));
}, 50);







  function getElementViewportData(element) {
    let rect = element.getBoundingClientRect();
    let isInViewport=
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    ;
    return {
      window:{
        height:window.innerHeight || document.documentElement.clientHeight,
        width:window.innerWidth || document.documentElement.clientWidth,
      },
      rect
    };
  }






</script>
<script>
    // 指定工作线程脚本的路径
    //pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.js';
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'js/pdf.js/2.11.338/pdf.worker.min.js';

let pdfData=(function(){
  let self = this;
  let container;
  let pdf;
  let numPages=0;



  function init(pdfURL, callback){
    console.log('init')
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'js/pdf.js/2.11.338/pdf.worker.min.js';
    container = document.getElementById('pdf-container');

    pdfjsLib.getDocument(pdfURL).promise.then(function(pdf) {
      removeChildren(container);
      
      numPages= pdf.numPages;
      if(numPages>0){
        pdf.getPage(1).then(function(page) {
          var scale = 1.5;
          var viewport = page.getViewport({ scale: scale });
          for(let ind=0;ind < numPages;ind++ ){
            let numPage = ind +1 ;
            addPage(numPage, numPages, viewport.width,viewport.height)
          }
          if(callback){
            callback.call(self);
          }
          
        });
      }
      else if(callback){
        callback.call(self);
      }
    });


  }
  return {init}
}());














    // 获取容器元素
    var container = document.getElementById('pdf-container');
    var pdfURL='../pdf/dwr学习笔记.pdf';
    
    //pdfURL='pdf/新产品经理认证（NPDP）知识体系指南（第2版）.pdf';


    pdfjsLib.getDocument(pdfURL).promise.then(function(pdf) {
      removeChildren(container);
      
      var numPages = pdf.numPages;
      pdf.getPage(1).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport({ scale: scale });
        for(let ind=0;ind < numPages;ind++ ){
          let numPage = ind +1 ;
          addPage(numPage, numPages, viewport.width,viewport.height)
        }

      })
    });

    // // 加载PDF文档
    // pdfjsLib.getDocument(pdfURL).promise.then(function(pdf) {
    //     var numPages = pdf.numPages
    //     var pageWith = 0;
    //     var showPage = function(pageNumber, pageCount){
    //       pdf.getPage(pageNumber).then(function(page) {
    //           var scale = 1.5;
    //           var viewport = page.getViewport({ scale: scale });

    //           // 创建一个<canvas>元素用于显示PDF页面
    //           var canvas = document.createElement('canvas');
    //           canvas.setAttribute('data-page',pageNumber)
    //           canvas.setAttribute('data-page',pageNumber)
    //           canvas.setAttribute('id',pageNumber)
    //           var context = canvas.getContext('2d');
              
    //           canvas.width = viewport.width;
    //           canvas.height = viewport.height;

    //           // 将PDF页面渲染到<canvas>元素中
    //           page.render({
    //               canvasContext: context,
    //               viewport: viewport
    //           });

    //           if (pageWith < viewport.width){
    //             pageWith = viewport.width
    //             container.setAttribute('style','width:'+(pageWith+50)+'px')
    //           }
    //           // 将<canvas>元素添加到容器中
    //           container.appendChild(canvas);
    //       });
    //     }

    //     for(let ind=0;ind < numPages;ind++ ){
    //       let numPage = ind +1 ;
    //       showPage(numPage, numPages)
    //     }
    // });

</script>


</body>
</html>
